<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.slideBox.js" type="text/javascript"></script>
    <title></title>
    <script>
        jQuery(function($){
            $('#demo1').slideBox();
            $('#demo2').slideBox({
                direction : 'left',//left,top#方向
                duration : 0.3,//滚动持续时间，单位：秒
                easing : 'linear',//swing,linear//滚动特效
                delay : 2,//滚动延迟时间，单位：秒
                startIndex : 1//初始焦点顺序
            });
            $('#demo3').slideBox({
                duration : 0.3,//滚动持续时间，单位：秒
                easing : 'linear',//swing,linear//滚动特效
                delay : 2,//滚动延迟时间，单位：秒
                hideClickBar : false,//不自动隐藏点选按键
                clickBarRadius : 10
            });
            $('#demo4').slideBox({
                hideBottomBar : true//隐藏底栏
            });
        });
    </script>
    <style>
    .pop {
    position: absolute;top: 0;left: 0;right:0;background-color: white;
    display: none;
    }
    .pop li{

    height: 2rem;
    border-bottom: 1px solid grey;
    line-height: 2rem;
    padding-left: 1rem;
    }

    </style>

</head>

<body >
<header style="border-top: 1px solid #778899;border-bottom: 1px solid #778899">
    <img src="top_back.png" style="float: left"/>
    <img id="cat" src="top_category.png" style="float: right" onclick="pop()" />

    <div style="margin: 0 3.5rem">
    <input type="text" placeholder="            请输入目的地" style="background-image:url('search.png') ;background-repeat: no-repeat;
     width: 100% ;height: 3rem;border-radius: 1rem;" />
    </div>
</header>

<div style="position: relative">
    <div class="pop" >
    <ul style="list-style-type: none;margin:0;padding-left: 0">
        <li >全部主题</li>
        <li >山水景观</li>
        <li >温泉度假</li>
        <li >酷夏漂流</li>
    </ul>
    </div>
</div>


<div id="demo2" class="slideBox" style="width: 100%">
    <ul class="items">
        <li><a href="" title="黄山"><img src="t_1.jpg"></a></li>
        <li><a href="" title="东南亚"><img src="t_2.jpg"></a></li>
        <li><a href="" title="香水湾"><img src="t_3.jpg"></a></li>
        <li><a href="" title="黄山"><img src="t_4.jpg"></a></li>
        <li><a href="" title="东南亚"><img src="t_5.jpg"></a></li>
    </ul>
</div>


<div style="height: 3rem;border-top: 1px solid;border-bottom: 1px solid">
    <div style="float: left;width: 50%;height: 100%;" align="center">
        <img src="jd_arr1.png" style="">
        <span>热门景点</span>
    </div>
    <div style="float: right;width: 50%;height: 100%" align="center">
        <img src="jd_arr2.png">
        <span>我身边</span>
    </div>
</div>
<div style="background-color: gainsboro;height: 1rem"></div>

<div style="height: 3rem;border-bottom: 1px solid grey">
    <div style="box-sizing: border-box;text-align: center;float: left;width: 33%; height: 100%;border-right: 1px solid grey ">位置区域<img src="channelBg.png" onclick="pop()">
    </div>
    <div style="float: left;text-align: center; width: 33%;height: 100%;">达人推荐<img src="channelBg.png">
    </div>
    <div style="box-sizing: border-box;text-align: center;float: right;width: 33%; height: 100%;border-left: 1px solid grey ">全部主题<img src="channelBg.png">
    </div>
</div>
<div style="position: relative">
    <div class="pop" >
        <ul style="list-style-type: none;margin:0;padding-left: 0">
            <li >全部主题</li>
            <li >山水景观</li>
            <li >温泉度假</li>
            <li >酷夏漂流</li>
        </ul>
    </div>
</div>

<div style="height: 50%">

    <div style="height: 25%;border-bottom: 1px solid grey;"><img style="margin:0.5rem 0;width:27%;border-radius: 0.5rem;" src="jd_pic.jpg">
        <span style="width: 30%;float: right "><div style="font-size: 1.5rem;color: gold;margin-top: 30%">￥100起</div><div>240</div></span>
        <span style="width: 43%;float: right "><div style="font-size: 1.1rem;margin-top: 20%">洞头望海楼景区</div><div>风景名胜</div><div style="color: grey">已售280</div></span>
    </div>
    <div style="height: 25%;border-bottom: 1px solid grey;"><img style="margin:0.5rem 0;width:27%;border-radius: 0.5rem;" src="jd_pic.jpg">
        <span style="width: 30%;float: right "><div style="font-size: 1.5rem;color: gold;margin-top: 30%">￥100起</div><div>240</div></span>
        <span style="width: 43%;float: right "><div style="font-size: 1.1rem;margin-top: 20%">洞头望海楼景区</div><div>风景名胜</div><div style="color: grey">已售280</div></span>
    </div>
    <div style="height: 25%;border-bottom: 1px solid grey;"><img style="margin:0.5rem 0;width:27%;border-radius: 0.5rem;" src="jd_pic.jpg">
        <span style="width: 30%;float: right "><div style="font-size: 1.5rem;color: gold;margin-top: 30%">￥100起</div><div>240</div></span>
        <span style="width: 43%;float: right "><div style="font-size: 1.1rem;margin-top: 20%">洞头望海楼景区</div><div>风景名胜</div><div style="color: grey">已售280</div></span>
    </div>
    <div style="height: 20%;text-align: center;margin-bottom: 20%">点击查看更多...</div>

</div>





<footer style="background-color:palegreen;position: fixed;left: 0;right: 0;bottom: 0;height: 4rem;">
    <div style="float:left;width: 25%;text-align: center"><img src="bottom_home.png"><div>首页</div></div>
    <div style="float:left;width: 25%;text-align: center"><img src="bottom_find.png"><div>发现</div></div>
    <div style="float:left;width: 25%;text-align: center"><img src="bottom_shop.png"><div>购物车</div></div>
    <div style="float:left;width: 25%;text-align: center"><img src="bottom_mine.png"><div>我的</div></div>
</footer>
<div style="position: fixed;background-color: #000000;"></div>

<script src="jquery-1.11.3.js"></script>
<script>
/*    var node1=$("#cat")[0];//var node=window.document.getElementById("cat");
    var  node=$(".pop")[0];//var node=window.document.getElementsByClassName("pop")[0];
    var shadow=$("#shadow")[0];//document.getElementById("shadow");

    function pop(){
        // alert("点击");
        if(node.style.display==""){
            node.style.display="block";
        }else{
            node.style.display="";
        }
    }*/

    $("#cat").click(function(){
        if($(".pop").css("display")=="none"){
            $(".pop").css("display","block");
        }else{
            $(".pop").css("display","none");
        }

    });
</script>
</body>
</html>